<template>
  <div>
    <a-row type="flex" :gutter="16">
      <a-col :span="6" v-if="designMode === 'design'">
        <a-card title="设计" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
            <a-button size="small" icon="reload" title="刷新预览表单" class="mr-1" @click="reload"></a-button>
            <a-button size="small" icon="code" title="切换至参数模式" @click="switchMode('code')"></a-button>
          </template>
        </a-card>
      </a-col>
      <a-col :span="6" v-else-if="designMode === 'code'">
        <a-card title="参数" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
            <a-button size="small" icon="reload" title="刷新预览表单" class="mr-1" @click="reload"></a-button>
            <a-button size="small" icon="layout" title="切换至设计模式" @click="switchMode('design')"></a-button>
          </template>
          <vue-json-editor v-model="listData" mode="code" @jsonChange="handleJsonChange" @hasError="onJsonError"></vue-json-editor>
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-card title="预览" class="card-holder">
          <div class="content-holder">
            <i-list :listData="listData" v-if="reloading === false"></i-list>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import IList from '../../components/IList'
import VueJsonEditor from '../../components/VueJsonEditor'
export default {
  name: 'ListLayout',
  components: {
    IList, VueJsonEditor
  },
  data() {
    return {
      designMode: 'design',
      reloading: false,
      listData: {
        title: '用户信息',
        columns: [
          {title: 'Name', dataIndex: 'name', width: '10%'}
        ],
        fetchUrl: '',
      }
    }
  },
  methods: {
    reload() {
      this.reloading = true;
      this.$nextTick(() => {
        this.reloading = false;
      });
    },
    switchMode(mode) {
      this.designMode = mode;
    },
    handleJsonChange(json) {

    },
    onJsonError(json) {

    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bfbfbf;
}

.card-holder {
  height: calc(100vh - 160px);
}

.content-holder {
  height: calc(100vh - 264px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>